<template>
	<div class="card-service-choose">
		<div class="top">
			<goback></goback>服务选择
		</div>
		<div class="choose-info">
			<div class="choose-info-item">
				<div class="left">服务车辆</div>
				<div class="right">别克凯越   1.8L   2016款<span class="iconfont icon-arrows"></span></div>
			</div>
			<div class="choose-info-item">
				<div class="left">服务门店</div>
				<div class="right">上海纪念路门店<span class="iconfont icon-arrows"></span></div>
			</div>
		</div>
		<div class="title">
			<div class="left">服务项目</div>
			<div class="right">使用规则</div>
		</div>
		<ul class="service-list">
			<li v-for='item in canChooseList'>
				<div class="left">{{item.name}}</div>
				<div class="right">
					<div >
						<input type="checkbox" :id='item.id' name="radio-1-set" class="regular-radio">
						<label :for='item.id'><div class="iconfont icon-checked"></div></label>
					</div>
					
				</div>
			</li>
			<li v-for='item in infiniteList'>
				<div class="left">{{item.name}}</div>
				<div class="right">
					<div  class="infinite">
						无需下单<br/>
						到店直接服务
					</div>
				</div>
			</li>
			<li v-for='item in zeroList'>
				<div class="left">{{item.name}}</div>
				<div class="right">
					<div   class="infinite">
						剩余0次
					</div>
					
				</div>
			</li>
		</ul>
		<div class="buy-btn">去下单</div>
	</div>
</template>
<script>
	import goback from '../common/goback';
	export default {
		data() {
				return {
					canChooseList:[
						{
							name:'嘉实多半合成保养套餐 4L',
							isbuy:true,
							times:'1',
							id:'01',
							type:'1'
							
						},
						{
							name:'更换空气滤清器',
							isbuy:true,
							times:'1',
							id:'02',
							type:'1'
							
						}
					],
					infiniteList:[
						{
							name:'20项安全检测'
						}
					],
					zeroList:[
						{
							name:'通用无骨雨刮更换',
						}
					]
				}
			},
			components: {
				goback
			},
			methods: {
				chooseCoupon: function(e) {

				}
			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body {
		background: #eeeeee!important;
	}
	
	.card-service-choose {
		font-size: rem(14);
		color: #333;
		.top {
			width: rem(375);
			height: rem(46);
			position: relative;
			text-align: center;
			line-height: rem(46);
			font-size: rem(17);
			color: #030303;
			text-align: center;
			background: rgba(250, 250, 250, 0.90);
			.goback {
				background: none;
				color: #666;
			}
		}
		.choose-info{
			padding-left: rem(14);
			background: #fff;
			margin-top: rem(16);
			font-size: rem(14);
			color: #333;
			.choose-info-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
				.left{
					
				}
				.right{
					padding-right: rem(20);
					span{
						color: #c7c7cc;
						font-size: rem(14);
					}
				}
			}
		}
		.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
				background: #fff;
				margin-top: rem(16);
				font-size: rem(14);
				color: #333;
				padding-left: rem(14);
				padding-right: rem(14);
				.right{
					font-size: rem(13);
					color: #999;
				}
		}
		.service-list{
			padding-left: rem(14);
			background: #fff;
			li{
				
				display: flex;
				align-items: center;
				width: rem(375);
				height: rem(44);
				border-bottom: 1px solid #eee;
				position: relative;
				justify-content: space-between;
			}
			.right{
				
				label{
					position: absolute;
					height: 100%;
					width: 100%;
					border-radius: 0;
					top: 0;
					left: 0;
					display: flex;
					align-items: center;
					border: none;
					justify-content: flex-end;
					
				}
				.infinite{
					font-size: rem(13);
					color: #999;
					margin-right: rem(28);
					text-align: right;
				}
				
				
			}
		}
		.buy-btn{
			position: fixed;
			width: rem(375);
			height: rem(48);
			background: #ff6600;
			bottom: 0;
			left: 0;
			text-align: center;
			color: #fff;
			line-height: rem(48);
			font-size: rem(18);
		}
	}
	.regular-radio {
		display: none;
	}
	
	.regular-radio+ label>div {
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
		border: 1px solid $_999;
		margin-right: rem(28);
		color: #fff;
	}
	
	.regular-radio:checked+ label>div {
		border: 1px solid $blue;
		background: $blue;
		width: rem(20);
		height: rem(20);
		line-height: rem(20);
		text-align: center;
		border-radius: 100%;
	}
</style>